<template>
  <div class="history__content">
    <div class="history__header">
      <div class="title">
        <svg-icon icon-class="history-btn" class="fs-20 history-btn mr-4"></svg-icon>
        <span class="fs-14">会话历史记录</span>
        <div class="type__select">
          <el-select
            v-model="curCategory"
            placeholder="请选择"
            size="small"
            @change="handlePageCategory"
          >
            <template slot="prefix">
              <div class="catgory__label">
                <span v-if="activeCategory">{{ activeCategory.label }}</span>
              </div>
            </template>
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <svg-icon icon-class="close" class="close-btn" @click="handleClose"></svg-icon>
    </div>
    <search @to-star="handlePageToStar" @search="handleSearchKeyword" />
    <list ref="refList" />
  </div>
</template>

<script>
import Search from './search.vue'
import List from './list.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'HistoryContent',
  components: {
    Search,
    List
  },
  data () {
    return {
      categoryList: [
        { label: '全部', value: '' },
        { label: '对话', value: 'completions', evtId: 156 },
        { label: '总结', value: 'knowledge', evtId: 155 }
      ],
      curCategory: ''
    }
  },
  computed: {
    ...mapGetters(['historyStore']),
    activeCategory () { return this.categoryList.find((v) => v.value === this.curCategory) }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleClose () {
      this.$store.dispatch('history/setStatus', false)
    },
    handlePageToStar () {
      const is_star = this.historyStore.activeType !== 'favorites'
      this.$refs.refList.initListPage({ is_star })
    },

    handlePageCategory () {
      this.$refs.refList.initListPage({ conversation_type: this.curCategory })
    },

    handleSearchKeyword  (keyword) {
      this.$refs.refList.initListPage({ keyword })
    }
  }
}
</script>

<style lang="scss" scoped>
.history__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 15px;
  overflow: hidden;
}
.history__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 15px 0px 15px;
  .title {
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.history-btn {
  position: relative;
  opacity: 0.8;
}
.close-btn {
  cursor: pointer;
  color: #fff;
  opacity: 0.7;
  font-size: 16px;
  &:hover {
    color: #fff;
    opacity: 1;
  }
}
.type__select {
  margin-left: auto;
  /deep/.el-select {
    width: 86px;
    font-weight: normal;
    .el-input {
      box-shadow: none;
      text-align: center;
    }
    .el-input__suffix {
      display: none;
    }
    .el-input--small {
      .el-input__inner {
        background-color: transparent;
        border: 0;
        opacity: 0;
      }
      .el-input__prefix {
        display: flex;
        width: 100%;
        justify-content: center;
      }
    }
  }
}
.catgory__label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba($color: #fff, $alpha: 0.7);
  cursor: pointer;
  &::after {
    content: '';
    // 黑色三角形,箭头向下
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent;
    position: relative;
    top: 3px;
  }
  &:hover {
    opacity: 1;
  }
}
</style>
